<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>年历</title>
<meta name="keywords" content="lunar,阳历,阴历,公历,农历,佛历,道历" />
<meta name="description" content="lunar是一个无依赖的支持阳历、阴历、佛历和道历的日历工具库。" />
<meta name="author" content="6tail" />
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="highlight.min.css">
<link rel="stylesheet" href="markdown.css">
<link rel="stylesheet" href="page.css">
<style type="text/css">
.bar{
  text-align:center;
}
#year{
  margin: 20px;
  border: 1px solid #D7D9E0;
  box-sizing: border-box;
  padding: 7px;
  border-radius: 6px;
  line-height: 1;
  position: relative;
  background: #FFFFFF;
  width: 100px;
  font-size: 16px;
  text-align: center;
}
#guali{
  position:relative;
  margin-bottom:20px;
  clear:both;
  zoom:1;
  overflow:hidden;
}
#guali ul.month{
  position: relative;
  display:block;
  margin:10px;
  padding:0;
  width:350px;
  height:334px;
  float:left;
  list-style:none;
  background-color:#FAFAFA
}
#guali h3{
  position: absolute;
  left:0;
  top:0;
  font-size:80px;
  width:100%;
  height:334px;
  text-align: center;
  line-height: 334px;
  color:#333;
  opacity: 0.1;
  filter: alpha(opacity=10);
}
#guali li{
  position:relative;
  display:block;
  float:left;
  width:50px;
  height:50px;
  margin:0;
  padding:0;
  text-align:center;
  cursor:default;
  line-height:1em;
  color: #444;
}
#guali li.week{
  height: 34px;
  line-height: 34px;
  font-size: 12px;
}
#guali b{
  font-size:9px;
  font-weight:normal;
  color:#999;
}
#guali i{
  display: block;
  font-size:9px;
  font-style:normal;
  color:#D02F12;
  white-space:nowrap;
  overflow: hidden;
}
#guali u{
  font-size:9px;
  font-style:normal;
  text-decoration:none;
  position:absolute;
  right:4px;
  top:0;
  color:#5CB85C;
}
#guali u.work{
  color:#333;
}
#guali li.today, #guali li.today b, #guali li.today i{
  color: #09C;
}
#guali li.today{
  font-weight: bold;
}
</style>
</head>
<body>
<div class="bar">
  <input type="text" id="year" placeholder="请输入阳历年份">
</div>
<div id="guali"></div>
<script src="jquery.min.js"></script>
<script src="highlight.min.js"></script>
<script src="marked.min.js"></script>
<script src="common.js"></script>
<script src="lunar.js"></script>
<script>
(function(){
  var today = Solar.fromDate(new Date()).toYmd();
  function generate(year){
    var months = year.getMonths();
    var s = '';
    var WEEK = '日一二三四五六'.split('');
    for(var x=0,y=months.length;x<y;x++){
      var mm = months[x];
      s += '<ul class="month"><h3>'+mm.getMonth()+'月</h3>';
      var days = mm.getDays();
      var week = days[0].getWeek();
      for(var i=0;i<7;i++){
        s += '<li class="week">'+WEEK[i]+'</li>';
      }
      for(var i=0;i<week;i++){
        s += '<li></li>';
      }
      for(var i=0,j=days.length;i<j;i++){
        var d = days[i];
        var dl = d.getLunar();
        var sf = d.getFestivals();
        var lf = dl.getFestivals();
        var fs = [];
        var jq = dl.getJieQi();
        if(jq){
          fs.push(jq);
        }
        for(var m=0,n=sf.length;m<n;m++){
          fs.push(sf[m]);
        }
        for(var m=0,n=lf.length;m<n;m++){
          fs.push(lf[m]);
        }
        s += '<li';
        if (d.toYmd() == today) {
          s += ' class="today"';
        }
        s += '>'+d.getDay()+'<br />';
        if(fs.length>0){
          s += '<i>'+fs.join(',')+'</i>';
        }else{
          if(1==dl.getDay()){
            s += '<b>'+dl.getMonthInChinese()+'月</b>';
          }else{
            s += '<b>'+dl.getDayInChinese()+'</b>';
          }
        }
        var h = HolidayUtil.getHoliday(d.toYmd());
        if(h){
          s += '<u';
          if(h.isWork()){
            s += ' class="work"';
          }
          s += '>'+(h.isWork()?'班':'休')+'</u>';
        }
        s += '</li>';
      }
      s += '</ul>';
    }
    document.getElementById('guali').innerHTML = s;
  }

  var compute = function(){
    try{
      var year = parseInt($('#year').val(), 10);
      if(isNaN(year)){
        return;
      }
      if(year<1||year>9999){
        return;
      }
      generate(SolarYear.fromYear(year));
    }catch(e){
      console.log(e);
    }
  };

  var today = Solar.fromDate(new Date());
  $('#year').val(today.getYear());

  compute();

  var throttle = function(fn,delay,atleast){
    var timer = null;
    var previous = null;
    return function(){
      var now = +new Date();
      if(!previous) previous = now;
      if(atleast && now - previous > atleast){
        fn();
        previous = now;
        clearTimeout(timer);
      } else {
        clearTimeout(timer);
        timer = setTimeout(function(){
          fn();
          previous = null;
        }, delay);
      }
    }
  };
  
  var onChange = throttle(function(){
    compute();
  },20,50);

  $('#year').on('input propertychange', onChange);
})();
</script>
</body>
</html>